<table mat-table [dataSource]="heroes" matSort matSortDisableClear="true">
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let hero"> {{hero.id}} </td>
  </ng-container>
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
    <td mat-cell *matCellDef="let hero"> {{hero.name}} </td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnNames"></tr>
  <tr mat-row *matRowDef="let row; columns: columnNames;"></tr>
</table>
<mat-paginator [pageSize]="2" [pageSizeOptions]="[2,4,6]"></mat-paginator>
